.container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px;
  background: linear-gradient(
    45deg,
    rgb(248, 108, 107),
    #ffb199,
    #ffbf7f,
    rgb(208, 240, 192),
    rgb(137, 234, 213),
    #b6fbfb,
    #a0cfe8
  );
  @mixin flex {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .box {
    width: 650px;
    height: 350px;
    background: #fff;
    border-radius: 10px;
    box-shadow: inset 2px 2px 2px 0px rgb(255 255 255 / 50%), 7px 7px 20px 0px rgb(0 0 0 / 10%),
      4px 4px 5px 0px rgb(0 0 0 / 10%);
    overflow: hidden;
    display: flex;
    .left {
      width: 300px;
      overflow: hidden;
      // border-radius: 10px;
      background-image: url('@/assets/images/userAvatar.png');
      background-size: cover;
      background-position: center;
      .blurBox {
        margin: 50px auto;
        border-radius: 5px;
        backdrop-filter: blur(5px);
        width: 170px;
        height: 90px;
        user-select: none;
        @include flex;
      }
    }
    .right {
      width: 350px;
      @include flex;
      flex-direction: column;
      justify-content: space-evenly;
    }
  }
}
